import React, { useEffect, useState } from 'react'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { ListItemType } from '../../types';
import { deleteList, editList, fetchList } from '../../api';
import { Table, Button, Space, Modal, Row, Col, Input } from 'antd';
import { ColumnsType } from 'antd/es/table';
import style from './style.module.css'
const Index = () => {
	// 搜索的数据
	const [value, setValue] = useState('')
	// 列表
	const [list, setList] = useState<ListItemType[]>([]);
	// 当前所有选中项目的id
	const [selectedIDS, setSelectedIDS] = useState('')
	// 弹框状态
	const [isShowModal, setIsShowModal] = useState(false)
	// 弹框数据
	const [editObject, setEditObject] = useState<ListItemType>({
		id: '1',
		tel: '2',
		address: '3',
		state: '4',
		tips: '5',
		name: '6',
	})
	// 列表头
	const columns: ColumnsType<ListItemType> = [{
		key: 'id',
		title: 'id',
		dataIndex: 'id',
	}, {
		key: 'name',
		title: 'name',
		dataIndex: 'name',
	}, {
		key: 'tel',
		title: 'tel',
		dataIndex: 'tel',
	}, {
		key: 'state',
		title: 'state',
		dataIndex: 'state',
	}, {
		key: 'address',
		title: 'address',
		dataIndex: 'address',
	}, {
		key: 'tips',
		title: 'tips',
		dataIndex: 'tips',
	}, {
		key: 'opration',
		title: '操作',
		render(record: ListItemType) {
			return (
				<Space>
					<Button type="primary" danger onClick={() => handleDelete(record.id)}>删除</Button>
					<Button type="primary" onClick={() => handleEdit(record)}>编辑</Button>
				</Space>
			)
		}
	}]

	// 列表请求函数
	const getList = async () => {
		const data = await fetchList({ value })
		setList(data.data)
	}

	// 删除点击事件
	const handleDelete = (id: string) => {
		// 二次确认删除
		Modal.confirm({
			title: '确认要删除该项数据吗?',
			icon: <ExclamationCircleOutlined />,
			okText: '确认',
			cancelText: '取消',
			// 确定删除
			onOk() {
				// 请求删除接口
				deleteList(id).then(data => {
					if (data.code === 0) {
						// 重新设置数据
						getList()
					}
				})
			}
		})
	}

	// 编辑点击事件
	const handleEdit = (row: ListItemType) => {
		setIsShowModal(true)
		setEditObject(row)
	}

	// 处理确定编辑
	const handleOnOk = () => {
		// 请求编辑接口
		editList(editObject).then((data) => {
			if (data.code === 0) {
				// 重新请求列表
				getList();
				// 关闭弹框
				setIsShowModal(false)
			}
		})
	}

	// 处理取消编辑
	const handleOnCancel = () => {
		setIsShowModal(false)
	}

	useEffect(() => {
		getList()
	}, [value])

	return (
		<div>
			<Input value={value} onChange={e => setValue(e.target.value)}></Input>
			{selectedIDS.length > 0 && <Button onClick={() => handleDelete(selectedIDS)} type="primary" danger>选中删除</Button>}
			<Table<ListItemType>
				rowSelection={{
					type: 'checkbox',
					// 选中发生改变
					onChange(selectedRowKeys: React.Key[], selectedRows: ListItemType[]) {
						// selectedRows 当前选中的数据数组
						setSelectedIDS(selectedRows.map(v => v.id).join(','))
					}
				}}
				columns={columns}
				dataSource={list}
				rowKey={record => record.id}
			></Table>

			<Modal open={isShowModal} title="修改信息" cancelText="取消" onOk={() => handleOnOk()} onCancel={() => handleOnCancel()}>
				<Row className={style['row']}>
					<Col span={2}>ID:</Col>
					<Col span={22}>
						<Input value={editObject.id} onChange={(e) => setEditObject({ ...editObject, id: e.target.value })} disabled></Input>
					</Col>
				</Row>
				<Row className={style['row']}>
					<Col span={2}>姓名:</Col>
					<Col span={22}>
						<Input value={editObject.name} onChange={(e) => setEditObject({ ...editObject, name: e.target.value })}></Input>
					</Col>
				</Row>
				<Row className={style['row']}>
					<Col span={2}>电话:</Col>
					<Col span={22}>
						<Input value={editObject.tel} onChange={(e) => setEditObject({ ...editObject, tel: e.target.value })}></Input>
					</Col>
				</Row>
				<Row className={style['row']}>
					<Col span={2}>状态:</Col>
					<Col span={22}>
						<Input value={editObject.state} onChange={(e) => setEditObject({ ...editObject, state: e.target.value })}></Input>
					</Col>
				</Row>
				<Row className={style['row']}>
					<Col span={2}>地址:</Col>
					<Col span={22}>
						<Input value={editObject.address} onChange={(e) => setEditObject({ ...editObject, address: e.target.value })}></Input>
					</Col>
				</Row>
				<Row className={style['row']}>
					<Col span={2}>提示:</Col>
					<Col span={22}>
						<Input value={editObject.tips} onChange={(e) => setEditObject({ ...editObject, tips: e.target.value })}></Input>
					</Col>
				</Row>
			</Modal>
		</div>
	)
}

export default Index